<template>
  <f7-page>
    <f7-navbar :title="`ZOL${$t('m.tabs.passContract')}`" back-link=" ">
      <f7-nav-right>
        <f7-link class="txt-button" href="/rule/">通证合约</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="content-padding">
      <div class="item-card">
        {{$t('m.bcdt1')}}
        <span>{{info.cycle}}{{$t('m.day')}}</span>
      </div>
      <div class="item-card">
        {{$t('m.bcdt2')}}
        <span>{{getBili}}%</span>
      </div>
      <div class="num-card margin-b20">
        <div class="top">
          <p>{{$t('m.bcdt3')}} USDT</p>
          <div class="input-box">
            <input type="tel" pattern="[0-9]*" :placeholder="`${info.limit_min}${$t('m.bcdt4')}`" v-model="formItems.num">
          </div>
        </div>
        <p class="tips"><span>{{$t('m.bcdt5')}}{{info.cycle}}{{$t('m.day')}}</span>，{{$t('m.bcdt6', {fee: $store.getters.config.config.project_cancel_bili * 100})}}%<!--<span>{{$moment(getTro()).format('MM-DD')}}</span>首笔BDF糖果奖励到账--></p>
      </div>
      <div class="item-card">
        {{$t('m.bcdt7')}}
        <span>{{totaoZol}}</span>
      </div>
      <p class="fee-p">{{$t('m.handlingFee')}}：0<span>USDT</span></p>

      <div class="pay-account">
        <f7-link @click="show = true">
          <div class="left">
            <p>{{$t('m.bcdt8')}}</p>
            <p><span>{{payType ===1?zolData.num:zolData.num_ctc_frozen}}</span> {{payType===1?$t('m.bcdt9'):`ZOL${$t('m.freeze')}`}}</p>
          </div>
          <f7-icon f7="chevron_right"></f7-icon>
        </f7-link>
      </div>
      <f7-button fill large color="blue" class="margin-t80" @click="pwdModal = true">{{$t('m.sure')}}</f7-button>
    </div>

    <van-popup v-model="show" slot="fixed">
      <div class="pay-type-modal">
        <div class="title">{{$t('m.bcdt10')}}</div>
        <f7-list>
          <f7-list-item>
            <div slot="title">
              <div class="left">
                <p>{{$t('m.bcdt8')}}</p>
                <p><span>{{zolData.num}}</span> {{$t('m.bcdt9')}}</p>
              </div>
            </div>

            <f7-checkbox name="checkbox-2" :checked="payType === 1" slot="after" @change="togglePayType(1)"></f7-checkbox>
          </f7-list-item>
          <f7-list-item class="van-hairline--bottom">
            <div slot="title">
              <p>{{$t('m.bcdt8')}}</p>
              <p><span>{{zolData.num_ctc_frozen}}</span> ZOL{{$t('m.freeze')}}</p>
            </div>

            <f7-checkbox name="checkbox-2" :checked="payType === 2" slot="after" @change="togglePayType(2)"></f7-checkbox>
          </f7-list-item>
        </f7-list>
        <f7-button color="white" @click="show = false">{{$t('m.cancel')}}</f7-button>
      </div>
    </van-popup>

    <van-dialog
      v-model="pwdModal"
      :title="$t('m.transactionPwdPlaceholder')"
      show-cancel-button
      slot="fixed"
      @confirm="handleBuy"
    >
      <div class="content-padding">
        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="formItems.pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import { getProjectList, runProject } from "../api/wealth";

  export default {
    name: "bcdt-buy",
    data () {
      return {
        show: false,
        payType: 1,
        formItems: {
          num: '',
          pwd: '',
          pay_type: 1
        },
        pwdModal: false,
        info: {}
      }
    },
    computed: {
      zolData() {
        return this.$store.getters.currencyInfo[1];
      },
      zolPrice() {
        return this.$store.getters.config.zol_price.price;
      },
      totaoZol() {
        return (this.formItems.num / this.zolPrice).toFixed(8);
      },
      getBili() {
        return this.$store.getters.config.config.static_bili / this.info.cycle * 100;
      }
    },
    mounted() {
      this.init();
      /*setTimeout(() =>{
        this.$f7router.navigate('/bb-exchange/');
      }, 1000)*/
    },
    methods: {
      init() {
        getProjectList().then(res => {
          this.info = res.data[0];
        }).catch( (error) => {
          if (error.status === -3011) {
            setTimeout(() =>{
              this.$f7router.navigate('/bb-exchange/');
            }, 500)
          }
        })
      },

      toggleModal () {
        this.show = true;
      },
      togglePayType (type) {
        this.payType = type;
        this.formItems.pay_type = type;
        this.show = false;
      },
      handleBuy() {
        runProject(this.formItems).then(() => {
          this.formItems.pwd = '';
          this.formItems.pay_type = 1;
          this.$f7router.navigate('/token-contract-record/');
        })
      },
      getTro() {
        return new Date().getTime() + 24 * 60 * 60 * 1000
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding;
    font-size: 28px;
  }
  .item-card {
    background: #fff;
    padding: 35px $padding;
    border-radius: $radius;
    display: flex;
    justify-content: space-between;
    margin-bottom: $padding20;
  }
  .num-card {
    background: #fff;
    padding: 35px $padding;
    border-radius: $radius;
    .input-box {
      border-bottom: 1px solid $colorGrey;
      position: relative;
      height: 100px;
      input {
        width: 100%;
        height: 100%;
        font-size: 30px;
      }
      .link {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .tips {
      padding-top: $padding20;
      color: $colorGrey;
      span {
        color: $mainColor;
      }
    }
  }
  .fee-p {
    text-align: right;
    padding: $padding20 0;
    color: $colorGrey;
    span {
      color: $mainColor;
    }
  }
  .pay-account {
    background: #fff;
    padding: 35px $padding;
    border-radius: $radius;
    .link {
      display: flex;
      justify-content: space-between;
      color: #000;
      p {
        &:last-child {
          color: $colorGrey;
          padding-top: 10px;
          span {
            color: $mainColor;
          }
        }
      }
    }
  }
  .pay-type-modal {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    .title {
      padding: 30px 0;
      text-align: center;
      font-size: 30px;
    }
    li {
      padding: $padding20 0;
    }
    span {
      color: $mainColor;
    }
    p {
      &:nth-child(even) {
        color: $colorGrey;
        padding-top: 15px;
      }
      i {
        color: #666;
      }
    }
    .button {
      height: 90px;
      line-height: 90px;
      font-size: 30px;
    }
  }
</style>
